<template>
  <div class="taskInfo-more">
    <div class="tooltip">"看完给我一个反馈吧"</div>
    <div>
      <template v-if="noticeType === '会议'">
        <el-button size="small" round @click="visible = true">不参与</el-button>
        <el-button
          type="primary"
          size="small"
          round
          @click="fetchFeedback('参与')"
          >参 与</el-button
        >
      </template>
      <el-button
        v-else
        type="primary"
        size="small"
        round
        @click="fetchFeedback('已阅')"
        >已 阅</el-button
      >
    </div>
    <!-- 不参与原因对话框 -->
    <el-dialog title="不参与原因" width="400px" :visible.sync="visible">
      <el-input v-model="reason" placeholder="请输入" style="width: 100%" />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="!reason"
          @click="fetchFeedback('不参与')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { postNoticeTaskFeedback } from "@/api/work";

export default {
  name: "TaskInfoFeedback",
  props: {
    noticeType: {
      type: String,
    },
    taskId: {
      type: Number,
    },
  },
  data() {
    return {
      visible: false,
      reason: "",
    };
  },
  methods: {
    handleNotJoin() {},
    handleJoin() {},
    handleRead() {},
    async fetchFeedback(status) {
      const params = {
        task: this.taskId,
        status,
      };
      if (status === "不参与") {
        params.content = this.reason;
      }
      const { data } = await postNoticeTaskFeedback(params);
      this.visible = false
      if(data && data.id) {
        this.$emit('onSubmit', params)
      }
    },
  },
};
</script>
<style lang="scss">
.taskInfo-more {
  margin-top: 26px;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #f1f1f1;
  .tooltip {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }
}
</style>